<template>
	<view class="page">
		<!-- Header -->
		<!-- <view class="header-bag font18">
			<image src="../../static/icon-back.png" class="back" @click="goBack" />
			<text>待评价商品</text>
		</view> -->
		
		<!-- Content wrapper -->
		<scroll-view 
			class="wrapper" 
			scroll-y="true" 
			@scrolltolower="loadMore"
			:refresher-enabled="true"
			:refresher-triggered="refreshing"
			@refresherrefresh="onRefresh"
		>
			<view class="order-box font13">
				<view 
					v-for="(item, index) in productList" 
					:key="index" 
					class="goods-list display-flex-l"
				>
					<view class="photos">
						<image :src="imgBaseUrl + item.img_path" mode="aspectFill" />
					</view>
					<view class="titles">
						<view class="goods-name">{{ item.goods_name }}</view>
						<view class="goods-spec">{{ item.goods_spec }}</view>
					</view>
					<view class="comments">
						<view 
							class="comment-btn" 
							@click="goToComment(item.id, item.manufac_name)"
						>
							去评价
						</view>
					</view>
				</view>
			</view>
			
			<!-- Loading more -->
			<view v-if="hasMore" class="more font15">
				<text>{{ loadingText }}</text>
			</view>
		</scroll-view>
		
		<!-- Empty state -->
		<view v-if="showEmpty" class="default">
			<view class="empty-icon">
				<image src="/static/icon-empty.png" />
			</view>
			<text class="empty-text">您还没有相关信息哦~</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				productList: [],
				currentPage: 1,
				hasMore: true,
				loading: false,
				refreshing: false,
				showEmpty: false,
				loadingText: '上拉加载...',
				imgBaseUrl: '' // 需要从配置中获取
			}
		},
		
		onLoad() {
			this.initData();
		},
		
		methods: {
			initData() {
				// 获取图片基础URL
				this.imgBaseUrl = getApp().globalData.imgBaseUrl || '';
				this.loadData(1);
			},
			
			async loadData(page = 1) {
				if (this.loading) return;
				
				this.loading = true;
				
				try {
					const userInfo = uni.getStorageSync('user_info');
					if (!userInfo || !userInfo.token) {
						uni.showToast({
							title: '请先登录',
							icon: 'none'
						});
						return;
					}
					
					const res = await this.$api.request({
						url: 'home/goods_eval/get_wait_comment',
						method: 'POST',
						data: {
							page: page
						},
						header: {
							'Authorization': userInfo.token
						}
					});
					
					if (res.r === 0) {
						const newList = res.data.lists || [];
						
						if (page === 1) {
							this.productList = newList;
							if (newList.length === 0) {
								this.showEmpty = true;
							} else {
								this.showEmpty = false;
							}
						} else {
							this.productList = [...this.productList, ...newList];
						}
						
						// 判断是否还有更多数据
						this.hasMore = newList.length > 0;
						this.currentPage = page;
					} else {
						uni.showToast({
							title: res.msg || '加载失败',
							icon: 'none'
						});
					}
				} catch (error) {
					console.error('加载数据失败:', error);
					uni.showToast({
						title: '网络错误',
						icon: 'none'
					});
				} finally {
					this.loading = false;
					this.refreshing = false;
				}
			},
			
			loadMore() {
				if (!this.hasMore || this.loading) return;
				this.loadData(this.currentPage + 1);
			},
			
			onRefresh() {
				this.refreshing = true;
				this.hasMore = true;
				this.loadData(1);
			},
			
			goToComment(orderId, facName) {
				uni.navigateTo({
					url: `/pages/order/publish-comment?orderId=${orderId}&facName=${encodeURIComponent(facName)}`
				});
			},
			
			goBack() {
				uni.navigateBack();
			}
		}
	}
</script>

<style lang="scss">
	.page {
		height: 100vh;
		background-color: #f5f5f5;
	}
	
	.header-bag {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		height: 88rpx;
		background-color: #fff;
		display: flex;
		align-items: center;
		padding: 0 30rpx;
		border-bottom: 1rpx solid #eee;
		z-index: 999;
		
		.back {
			width: 40rpx;
			height: 40rpx;
			margin-right: 20rpx;
		}
		
		text {
			font-size: 36rpx;
			font-weight: 500;
			color: #333;
		}
	}
	
	.wrapper {
		margin-top: 88rpx;
		height: calc(100vh - 88rpx);
	}
	
	.order-box {
		padding: 20rpx;
	}
	
	.goods-list {
		background-color: #fff;
		border-radius: 16rpx;
		padding: 30rpx;
		margin-bottom: 20rpx;
		display: flex;
		align-items: center;
		
		.photos {
			width: 120rpx;
			height: 120rpx;
			margin-right: 20rpx;
			
			image {
				width: 100%;
				height: 100%;
				border-radius: 8rpx;
			}
		}
		
		.titles {
			flex: 1;
			margin-right: 20rpx;
			
			.goods-name {
				font-size: 28rpx;
				color: #333;
				margin-bottom: 10rpx;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}
			
			.goods-spec {
				font-size: 24rpx;
				color: #999;
			}
		}
		
		.comments {
			.comment-btn {
				background-color: #ff6b35;
				color: #fff;
				padding: 16rpx 32rpx;
				border-radius: 40rpx;
				font-size: 26rpx;
				text-align: center;
			}
		}
	}
	
	.more {
		text-align: center;
		padding: 30rpx;
		color: #999;
		font-size: 28rpx;
	}
	
	.default {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		text-align: center;
		
		.empty-icon {
			margin-bottom: 20rpx;
			
			image {
				width: 120rpx;
				height: 120rpx;
			}
		}
		
		.empty-text {
			font-size: 28rpx;
			color: #999;
		}
	}
	
	.font13 {
		font-size: 26rpx;
	}
	
	.font15 {
		font-size: 30rpx;
	}
	
	.font18 {
		font-size: 36rpx;
	}
	
	.display-flex-l {
		display: flex;
		align-items: center;
	}
</style>